<template>
	<view class="">
		<view class="bg">
			<view class="balance jui_flex_col_center jui_fc_fff">
				<view class=""> 总余额 </view>
				<view class="jui_font_weight jui_mar_t20 num"> 
				{{info.countwallet || 0 }} 
				</view>
			</view>
		</view>
		<view class="money-list">
			<view class="money-list-left">
				<view>
					<view>BLTZ余额</view>
					<view class="money-num"
						style="display: flex; align-items: center; margin-top:18rpx;justify-content:center; flex-direction: column;">
						<view style="height: 50rpx; line-height: 50rpx;">价格{{info.cnydigitalwallet || 0 }}</view>
						<view style="display: flex; width: 100%; justify-content: space-around;">
							<view style="height: 50rpx; line-height: 50rpx;">单价{{digitalMoney}}</view>
							<view style="height: 50rpx; line-height: 50rpx;">数量{{ info.digitalwallet || 0 }}</view>
						</view>
						
					</view>
				</view>

			</view>
			<view class="money-list-left">
				<view>CNY余额</view>
				<view class="money-num"
					style="display: flex; align-items: center; margin-top:18rpx;justify-content:center; flex-direction: column;">
					<view style="height: 50rpx; line-height: 50rpx;">{{info.cnywallet || 0 }}</view>
				</view>
			</view>
		</view>
		<view class="jui_mar_2432 jui_pad_2432 jui_bor_rad_30 jui_bg_fff four">
			<view class="jui_flex1 jui_flex_col_center jui_mar_b20 ">
				<navigator class="goods-box" :url="'/pages/user/wallet/detail/operationwalletDetail?type=11'">
					<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
						{{info.operationwallet || 0 }}
					</view>
					<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
						运营中心
					</view>
				</navigator>
			</view>
			<view v-if="model=='0'">
				<view class="jui_flex">
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20 ">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/provincialwalletDetail?type=10'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.provincialwallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								省级代理
							</view>
						</navigator>
					</view>
					<view class="jui_flex1 jui_flex_col_center">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/purchaseDetail?type=5'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center"> {{info.purchase || 0 }} </view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								消费奖励
							</view>
						</navigator>
					</view>
				</view>
				<view class="jui_flex">
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/citywalletDetail?type=9'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.citywallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								市级代理
							</view>
						</navigator>
					</view>
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/directwalletDetail?type=6'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.directwallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								直属奖励
							</view>
						</navigator>
					</view>
				</view>
				<view class="jui_flex">
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/areawalletDetail?type=8'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.areawallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								区县代理
							</view>
						</navigator>
					</view>
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<view class="jui_flex1 jui_flex_col_center">
							<navigator class="goods-box" :url="'/pages/user/wallet/detail/indirectwalletDetail?type=7'">
								<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
									{{info.indirectwallet || 0 }}
								</view>
								<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
									间属奖励
								</view>
							</navigator>
						</view>
					</view>
					<!-- <view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/leadwalletDetail?type=12'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center" > {{info.leadwallet || 0 }} </view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center"> 团队奖励 </view>
						</navigator>
					</view> -->
				</view>
			</view>
			<view v-if="model=='1'">
				<view class="jui_flex">
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/directwalletDetail?type=6'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.directwallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								直属奖励
							</view>
						</navigator>
					</view>
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<view class="jui_flex1 jui_flex_col_center">
							<navigator class="goods-box" :url="'/pages/user/wallet/detail/indirectwalletDetail?type=7'">
								<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
									{{info.indirectwallet || 0 }}
								</view>
								<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
									间属奖励
								</view>
							</navigator>
						</view>
					</view>
				</view>
				<view class="jui_flex">
					<view class="jui_flex1 jui_flex_col_center">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/purchaseDetail?type=5'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center"> {{info.purchase || 0 }} </view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								消费奖励
							</view>
						</navigator>
					</view>
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/areawalletDetail?type=8'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.areawallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								分红奖励
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view v-if="model=='2'">
				<view class="jui_flex">
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/directwalletDetail?type=13'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.leadwallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								服务中心
							</view>
						</navigator>
					</view>
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<view class="jui_flex1 jui_flex_col_center">
							<navigator class="goods-box" :url="'/pages/user/wallet/detail/purchaseDetail?type=5'">
								<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
									{{info.purchase || 0 }}
								</view>
								<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
									消费奖励
								</view>
							</navigator>
						</view>
					</view>
				</view>
				<view class="jui_flex">
					<view class="jui_flex1 jui_flex_col_center">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/indirectwalletDetail?type=8'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center"> {{info.areawallet || 0 }} </view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								分红奖励
							</view>
						</navigator>
					</view>
					<view class="jui_flex1 jui_flex_col_center jui_mar_b20">
						<navigator class="goods-box" :url="'/pages/user/wallet/detail/areawalletDetail?type=6'">
							<view class="jui_fc_333 jui_font_w600 jui_flex_col_center">
								{{info.directwallet || 0 }}
							</view>
							<view class="jui_fc_999 jui_fs29 jui_mar_t20 jui_flex_col_center">
								分享奖励
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn">
			<view style="margin-right: 30upx;box-shadow: 0px 0px 10px 0px rgba(24, 118, 255, 0.7);"
				@tap="jump('/pages/user/wallet/recharge')">充值</view>
			<view style="margin-right: 30upx;box-shadow: 0px 0px 10px 0px rgba(24, 118, 255, 0.7);"
				@tap="jump('/pages/user/wallet/withdrawal')">提现</view>
			<view style="box-shadow: 0px 0px 10px 0px rgba(24, 118, 255, 0.7);"
				@tap="jump('/pages/user/wallet/huzhuan')">互转</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				q: {
					id: '',
					page: 1,
					page_num: 20
				},
				isLoading: true,
				hasMore: true,
				loadStatus: '',
				list: [],
				digitalMoney:'',
				model: '0',
			}
		},
		onLoad() {
			const vmodel = uni.getStorageSync('model');
			this._data.model = vmodel;
		},
		onShow() {
			this.init();
		},
		methods: {
			init() {
				this.$api.myMoneyGet().then(res => {
					if (res.ok) {
						this.info = res.data[0]
					}
				})
				this.$api.config().then(res => {
					if (res.ok) {
						this.digitalMoney = res.data.digitalMoney
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.icon-money {
		width: 15px;
		border: 1px solid;
		border-radius: 100%;
		height: 15px;
		/* line-height: 12px; */
		text-align: center;
		font-size: 12px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer_btn {
		position: absolute;
		bottom: 0;
		background: #fff;
		padding: 40upx 30upx;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		view {
			flex: 1;
			height: 74upx;
			text-align: center;
			line-height: 74upx;
			font-size: 32upx;
			color: #fff;
			border-radius: 40upx;
			background: $zhuse;
		}
	}
	.bg {
		height: 410rpx;
		background: url(../../../static/imgs/user/user_bg.png) 0 0 / 100% 100% no-repeat;
		position: relative;

		.balance {
			width: 100%;
			position: absolute;
			top: 50rpx;

			.num {
				font-size: 56rpx;
			}
		}
	}
	.four {
		width: 92%;
		box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
	}
	.money-list {
		position: absolute;
		top: 210rpx;
		display: flex;
		width: 100%;
		color: #fff
	}
	.money-list-left,
	.money-list-right {
		width: 50%;
		text-align: center;
	}
	.money-num {
		font-size: 24rpx
	}
	.con {
		position: absolute;
		top: 660rpx;
		width: 100%;
		margin-top: 36upx;
		margin: 0 auto;
		.list {
			background: #fff;
			border-radius: 10upx;
			padding: 30upx 40rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f4f4f4;
			image {
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
			}
			.right {
				text-align: right;
				font-size: 32upx;
				color: #333;
				margin-left: 30upx;
				text {
					color: $zhuse;
				}
			}
		}
	}
</style>
